<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>旋转的太极</title>
		<style type="text/css">
			div {
				width: 1000px;
				height: 1000px;
				text-align: center;
				border: 2px solid;
			}
		</style>
	</head>
	<body>
		<canvas id="Mycanvas" width="1000px" height="1000pz"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("Mycanvas");
				var ctx = canvas.getContext("2d");
				var rot = 0;
				var r = 100;
				var a =250;
			    var b =5;/*圆周率角度*/
				var hudu = 5*Math.PI*r/180;/*弧长*/
				var a1 =550; 						    
				setInterval(function() {					
					
					/*ctx.clearRect();*/
					ctx.beginPath();					
				    ctx.fillStyle = "red";
					ctx.fillRect(0, 0, 2000,2000);					
					ctx.arc(a, 250, r, (rot / 180) * Math.PI, (1 + rot / 180) * Math.PI, true);
					ctx.fillStyle = "black";
					ctx.fill();
					ctx.beginPath();
					ctx.arc(a, 250, r, (rot / 180) * Math.PI, (1 + rot / 180) * Math.PI);
					ctx.fillStyle = "white";
					ctx.fill();
					var x = Math.cos(rot / 180 * Math.PI) * 0.5*r;
					var y = Math.sin(rot / 180 * Math.PI) * 0.5*r;	
					ctx.beginPath();
					ctx.arc(a - x, 250 - y, r/2, 0, 2 * Math.PI);
					ctx.fillStyle = "black";
					ctx.fill();
					ctx.beginPath();
					ctx.arc(a + x, 250 + y, r/2, 0, 2 * Math.PI);
					ctx.fillStyle = "white";
					ctx.fill();
					ctx.beginPath();
					ctx.arc(a - x, 250 - y, r/10, 0, 2 * Math.PI);
					ctx.fillStyle = "white";
					ctx.fill();
					ctx.beginPath();
					ctx.arc(a + x, 250 + y, r/10, 0, 2 * Math.PI);
					ctx.fillStyle = "black";
					ctx.closePath();
					ctx.fill();
					rot = rot +b;
					a = a + hudu;
			if (a > 700|| a < 100) {
				hudu = -hudu;
				b=-b;
			}
			
				
				/*第二个*/
			
			/*setInterval(function() {					
					var x = Math.cos(rot / 180 * Math.PI) * 0.5*r;
					var y = Math.sin(rot / 180 * Math.PI) * 0.5*r;					
						*/				
//					ctx.fillStyle = "red";
//					ctx.fillRect(0, 0, 2000,2000);
                    ctx.beginPath();
					ctx.arc(a1, 250, r, (rot / 180) * Math.PI, (1 + rot / 180) * Math.PI, true);
					ctx.fillStyle = "black";
					ctx.fill();
					ctx.beginPath();
					ctx.arc(a1, 250, r, (rot/ 180) * Math.PI, (1 + rot / 180) * Math.PI);
					ctx.fillStyle = "white";
					ctx.fill();
					ctx.beginPath();
					ctx.arc(a1 - x, 250 - y, r/2, 0, 2 * Math.PI);
					ctx.fillStyle = "black";
					ctx.fill();
					ctx.beginPath();
					ctx.arc(a1 + x, 250 + y, r/2, 0, 2 * Math.PI);
					ctx.fillStyle = "white";
					ctx.fill();
					ctx.beginPath();
					ctx.arc(a1 - x, 250 - y, r/10, 0, 2 * Math.PI);
					ctx.fillStyle = "white";
					ctx.fill();
					ctx.beginPath();
					ctx.arc(a1 + x, 250 + y, r/10, 0, 2 * Math.PI);
					ctx.fillStyle = "black";
					ctx.closePath();
					ctx.fill();
					rot = rot +b;
					a1 = a1 + hudu;
			if (a1 > 900|| a1 < 100) {
				hudu = -hudu;
				b=-b;
			}			
				}, 100)
		</script>
	</body>
</html>